<template>
    <div class="app-layout">
      <!-- 顶部导航栏 -->
      <TopNav :menus="topMenus" @menu-click="handleMenuClick" />
      
      <!-- 整体内容区域 -->
      <div class="content-container">
        <!-- 侧边栏二级菜单 -->
        <SideMenu 
          :menus="sideMenus" 
          :active-key="activeKey"
          @menu-click="handleSubMenuClick" 
        />
        
        <!-- 主内容区域 -->
        <div class="main-content">
          <router-view />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import TopNav from './TopNav.vue'
  import SideMenu from './SideMenu.vue'
  
  export default {
    components: { TopNav, SideMenu },
    data() {
      return {
        topMenus: [
          { path: '/', title: '首页', icon: 'home' },
          { path: '/text-analysis', title: '文本工具', icon: 'tools' },
          { path: '/reverse', title: '逆向常用工具', icon: 'tools' },
          { path: '/code-reuse', title: '代码瀑布', icon: 'code' },
          { path: '/download-tools', title: '工具下载', icon: 'download' },
          { path: '/tech-docs', title: '技术文档', icon: 'doc' },
          { path: '/resume', title: '个人简历', icon: 'user' }
        ],
        sideMenus: [] // 二级菜单根据一级菜单动态加载
      }
    },
    methods: {
      handleMenuClick(menu) {
        // 点击一级菜单时切换路由
        this.$router.push(menu.path)
        
        // 加载对应二级菜单
        this.sideMenus = menu.path === '/text-analysis' 
          ? [ { title: '图表分析', key: 'chart-analysis' }]
          : menu.path === '/reverse'
          ? [
              { title: 'JS逆向工具', key: 'is' },
              { title: '安卓逆向工具', key: 'android' }
            ]
          : []
        
        // 自动选中第一个二级菜单项
        if (this.sideMenus.length > 0) {
          this.activeKey = this.sideMenus[0].key
          // 自动跳转到第一个二级菜单的路由
          this.handleSubMenuClick(this.sideMenus[0])
        }
      },
      handleSubMenuClick(subMenu) {
        if (subMenu.key === 'is') {
          this.$router.push('/reverse/is')
        } else if (subMenu.key === 'android') {
          this.$router.push('/reverse/android')
        }
        this.activeKey = subMenu.key
      }
    },
    data() {
      return {
        topMenus: [
          { path: '/', title: '首页', icon: 'home' },
          { path: '/text-analysis', title: '文本工具', icon: 'tools' },
          { path: '/reverse', title: '逆向常用工具', icon: 'tools' },
          { path: '/code-reuse', title: '代码瀑布', icon: 'code' },
          { path: '/download-tools', title: '工具下载', icon: 'download' },
          { path: '/tech-docs', title: '技术文档', icon: 'doc' },
          { path: '/resume', title: '个人简历', icon: 'user' }
        ],
        sideMenus: [],
        activeKey: ''
      }
    },
    mounted() {
      // 初始化默认菜单
      this.handleMenuClick(this.topMenus[0])
    }
  }
  </script>
  
  <style scoped>
  .app-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-x: hidden;
    /* background: rgb(0,238,238); */
  }
  
  .content-container {
    display: flex;
    flex: 1;
    flex-direction: column; /* 移动端改为垂直布局 */
  }
  
  @media (min-width: 768px) {
    .content-container {
      flex-direction: row; /* 桌面端保持水平布局 */
    }
  }
  
  .top-nav {
    height: 60px;
    background: #4285f4;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0; /* 防止导航栏被压缩 */
  }
  
  .side-menu {
    width: 200px;
    background: #f8f9fa;
    padding: 20px;
    border-right: 1px solid #e9ecef;
    flex-shrink: 0; /* 防止侧边栏被压缩 */
  }
  
  .main-content {
    flex: 1;
    padding: 20px;
    background: white;
    overflow-x: auto; /* 添加横向滚动条当内容过长时 */
    min-width: 0; /* 防止flex项目溢出 */
  }
  </style>